<template>
  <div>
    <div class="time">
      <p>统计截至 {{ WomWorld.lastUpdateTime }}</p>
    </div>
    <div class="info">
      <van-row>
        <van-col span="6">
          <p class="yesterday">
            较上日<span class="num">{{ WomWorld.nowConfirmAdd | num }}</span>
          </p>
          <p class="big num">{{ WomWorld.nowConfirm }}</p>
          <p>现有确诊</p>
        </van-col>
        <van-col span="6">
          <p class="yesterday">
            较上日<span class="num">{{ WomWorld.confirmAdd | num }}</span>
          </p>
          <p class="big num">{{ WomWorld.confirm }}</p>
          <p>累计确诊</p>
        </van-col>
        <van-col span="6">
          <p class="yesterday">
            较上日<span class="num">{{ WomWorld.healAdd | num }}</span>
          </p>
          <p class="big num">{{ WomWorld.heal }}</p>
          <p>累计治愈</p>
        </van-col>
        <van-col span="6">
          <p class="yesterday">
            较上日<span class="num">{{ WomWorld.deadAdd | num }}</span>
          </p>
          <p class="big num">{{ WomWorld.dead }}</p>
          <p>累计死亡</p>
        </van-col>
      </van-row>
    </div>
    <div class="title">
      <h3>海外疫情</h3>
    </div>

    <div class="box">
      <van-sticky>
        <div class="top">
          <van-row>
            <van-col class="one" span="4">地区</van-col>
            <van-col span="4">新增确诊</van-col>
            <van-col span="6">累计确诊</van-col>
            <van-col span="6">治愈</van-col>
            <van-col span="4">死亡</van-col>
          </van-row>
        </div>
      </van-sticky>

      <div class="bottom">
        <van-row v-for="(item, index) in WomAboard" :key="index">
          <van-col class="one" span="4">{{ item.name }}</van-col>
          <van-col span="4">{{ item.confirmAdd }}</van-col>
          <van-col span="6">{{ item.confirm }}</van-col>
          <van-col span="6">{{ item.heal }}</van-col>
          <van-col span="4">{{ item.dead }}</van-col>
        </van-row>
      </div>
    </div>
    <div class="fanhui" :class="{gotop:flag}">
      <van-icon name="back-top" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      WomAboard: [],
      WomWorld: {},
      flag: true,
    };
  },
  created() {
    this.$api.getHaiWai().then((res) => {
      console.log(res.data.data);
      this.WomAboard = res.data.data.WomAboard;
      this.WomWorld = res.data.data.WomWorld;
    });
  
    //
  },
  mounted(){
     window.addEventListener("scroll", function () {
      let top = document.documentElement.scrollTop;
      console.log(top);
      if(top>=600){
          this.flag=false
          console.log('修改状态');
      }
    });
  }
};
</script>

<style scoped lang='less'>
.time {
  padding-left: 0.2rem;
  line-height: 0.8rem;
  height: 0.8rem;
  background-color: #fff;
  font-size: 0.24rem;
  color: #999;
}
.info {
  background-color: #fff;
  padding: 0.4rem;
  text-align: center;
  font-size: 0.24rem;
  .van-col {
    padding: 0.2rem 0;
    p {
      margin: 0.1rem 0;
    }
  }
  .van-col:nth-child(1) {
    background: #fff8f8;
    .num {
      color: #e61c1d;
    }
  }
  .van-col:nth-child(2) {
    background: #fff4f4;
    .num {
      color: #be2121;
    }
  }
  .van-col:nth-child(4) {
    background: #f3f6f8;
    .num {
      color: #4e5a65;
    }
  }
  .van-col:nth-child(3) {
    background: #f1f8f4;
    .num {
      color: #178b50;
    }
  }
  .yesterday {
    font-size: 0.24rem;
  }
  .big {
    font-size: 0.28rem;
    font-weight: 700;
  }
}

.title {
  background-color: #fff;
  padding: 0 0 0.3rem 0.4rem;
}
.box {
  padding: 0 0.4rem 0.4rem 0.4rem;
  background-color: #fff;
  text-align: center;
  .top {
    .van-col {
      font-size: 0.26rem;
      height: 0.8rem;
      line-height: 0.8rem;
    }
    .van-col:nth-child(1) {
      background-color: #f5f5f5;
      color: #222;
    }
    .van-col:nth-child(2) {
      background-color: #e8effc;
      color: #005dff;
    }
    .van-col:nth-child(3) {
      background-color: #fdeeee;
      color: #f55253;
    }
    .van-col:nth-child(4) {
      background-color: #e9f7ec;
      color: #178b50;
    }
    .van-col:nth-child(5) {
      background-color: #f3f6f8;
      color: #4e5a65;
    }
  }
  .one {
    text-align: left;
    padding-left: 0.2rem;
  }
  .bottom {
    .van-row {
      display: flex;
      align-items: center;
      font-size: 0.24rem;
      min-height: 0.8rem;
      border-bottom: 1px solid #eee;
    }
  }
}
.fanhui {
  position: fixed;
  bottom: 0.6rem;
  right: 0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  background: #999;
  border-radius: 50%;
  font-size: 0.5rem;
  text-align: center;
  color: #fff;
  .van-icon {
    margin-top: 0.06rem;
  }
}
.gotop{
    display: none;
}
</style>